<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>多人聊天室</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
    <script type="text/javascript" th:inline="javascript">
        /* <![CDATA[ */
        var base_url = /*[[@{/}]]*/'base_url';
        /* ]]> */
    </script>
    <script src="http://cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
    <!--<script src="static/sockjs.js"></script>-->
    <script src="static/chat.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
        /* <![CDATA[ */
        var getOnlineInterval = 0;
        $(function(){
            $("#messageBtn").click(function(){
                sendMessage("msg",$("#messageText").val());
            });
            $("#messageText").keypress(function(e){
                if(e.which==13){
                    sendMessage("msg",$("#messageText").val());
                }
            });
            $("#username").keypress(function(e){
                if(e.which==13){
                    connect();
                }
            });
            getOnline();
            getOnlineInterval = setInterval("getOnline()", 5000);
        })

        //目前是通过不停的轮询的方式获取在线人数的，还没想到更好的办法

        /* ]]> */
    </script>
</head>
<body>
<input type="hidden" id="baseURL" th:value="@{/}" />
<div class="container">
    <div class="row" style="margin-top: 20px;">
        <!--左侧用户列表-->
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="input-group" style="margin-top: 5px;" id="loginPanel">
                        <input type="text" class="form-control" id="username" maxlength="500" placeholder="请输入昵称"/>
                        <span class="input-group-btn">
                            <button class="btn btn-success" id="connect" onclick="connect()" type="button">上线</button>
                        </span>
                    </div>
                    <div class="media" style="display: none;margin-top: 5px;" id="userInfoPanel">
                        <a class="media-left" href="#">
                            <img class="media-object img-circle" data-src="holder.js/32x32" alt="32x32" data-holder-rendered="true" style="width: 32px; height: 32px;"
                                 src="static/img/head.jpg"/>
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading"  style="padding-top: 7px;" id="nickName">
                                &nbsp;
                            </h4>
                        </div>
                        <div class="media-right">
                            <a href="#" title="退出登录" class="glyphicon glyphicon-off" id="disconnect" onclick="disconnect()" style="padding-top: 7px;"></a>
                        </div>
                    </div>
                </div>
                <div class="panel-body" style="height: 650px;overflow-x: hidden;overflow-y: auto">
                    <div class="media-list" id="onlineUserList">
                        <div class="media square" title="聊天广场" id="">
                            <div class="media-left">
                                <img class="media-object img-circle" data-src="holder.js/50x50" alt="50x50" data-holder-rendered="true" style="width: 50px; height: 50px;" src="static/img/head.jpg"/>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading text-dange">
                                    聊天广场
                                </h4>
                                <p class="text-muted">所有人可见...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--聊天panel-->
        <div class="col-md-9 boder">
            <!--聊天内容-->
            <div id="chatConsole" class="panel panel-default">
                <div class="panel-heading" id="targetNameTop">[聊天广场]</div>
                <div class="panel-body">
                    <div style="width: 100%;height: 583px;overflow-y: auto;overflow-y: hidden" id="messageConsole">
                        <p class="text-muted">1.发布到聊天广场的信息所有人可见。</p>
                        <p class="text-muted">2.点击左侧的用户列表可以私密聊天。</p>
                    </div>
                </div>
            </div>
            <div class="input-group">
                <input type="hidden" value="" id="targetId"/>
                <input type="text" disabled="disabled" class="form-control" id="messageText" maxlength="500" placeholder="发布信息到广场..."/>
                <span class="input-group-btn">
                    <button disabled="disabled" class="btn btn-info" id="messageBtn" type="button">发送</button>
                </span>
            </div>
        </div>
    </div>
</div>
</body>
</html>